<template>
  <div class="header">	
  	<div class="header-left"><div class="iconfont back-icon">&#xe624;</div></div>	
  	<div class="header-input"><span class="iconfont">&#xe632;</span>城市/游玩主题</div>
    <router-link to="/city">
  	  <div class="header-right">
  	    {{this.city}}
  	    <span class="iconfont down-arrow-icon">&#xe62d;</span>
  	  </div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader',
  props: {
    city: String
  }
}
</script>
<style lang="stylus" scoped>
  @import '~styles/variables.styl'
  .header
    display: flex
  	 line-height: .86rem
  	 background: $bgColor
  	 color: #fff
  	 .header-left
  	   width: .64rem
  	   float: left
  	   .back-icon
  	     text-align: center;
  	     font-size: .4rem
  	 .header-input 
  	   flex: 1
  	   margin-top: .12rem
  	   margin-left: .2rem
  	   height: .64rem
  	   line-height: .64rem
  	   border-radius: .1rem
  	   background: #fff  
  	   color: #ccc
  	   padding-left: .2rem
  	 .header-right
  	   width: 1.24rem
  	   float: right
      color: red  
  	   text-align: center
  	   .down-arrow-icon
  	   	 margin-left: -.04rem
  	     font-size: .2rem
</style>
